<template>
    <div class="box">
        <!--搜索区域-->
        <div class="search">
            <el-form :inline="true" :model="searchForm" ref="searchForm" class="demo-form-inline">
                <el-form-item label="账号">
                    <el-input v-model="searchForm.searchParams.username" placeholder="用户名"></el-input>
                </el-form-item>
                <el-form-item label="部门">
                    <el-select v-model="searchForm.searchParams.deptId" placeholder="部门">
                        <el-option v-for="(dept,index) in deptList" :label="dept.deptName" :value="dept.id"
                                   :key="index"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="状态">
                    <el-select v-model="searchForm.searchParams.state" placeholder="状态">
                        <el-option label="禁用" value="0"></el-option>
                        <el-option label="正常" value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="onSubmit">搜索</el-button>
                    <el-button type="primary" icon="el-icon-refresh" @click="resetForm">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!--新增  批量删除-->
        <div class="batch">
            <el-button type="primary" size="small" icon="el-icon-plus" @click="showAddDialog">新增</el-button>
            <el-button type="danger" size="small" icon="el-icon-delete" @click="batchDelete">批量删除</el-button>
        </div>
        <!--表格数据-->
        <div class="table-data">
            <el-table
                    :data="tableData"
                    stripe
                    @selection-change="handleSelectionChange"
                    style="width: 100%">
                <el-table-column
                        fixed="left"
                        type="selection"
                        width="50">
                </el-table-column>
                <el-table-column
                        prop="username"
                        width="120"
                        label="用户名">
                </el-table-column>
                <el-table-column
                        prop="nickName"
                        width="120"
                        label="昵称">
                </el-table-column>
                <el-table-column
                        label="性别">
                    <template v-slot="scope">
                        <span v-if="scope.row.sex==1">男</span>
                        <span v-else>女</span>
                    </template>
                </el-table-column>
                <el-table-column
                        show-overflow-tooltip
                        prop="city"
                        width="120"
                        label="城市">
                </el-table-column>
                <el-table-column
                        prop="tel"
                        width="150"
                        label="联系方式">
                </el-table-column>
                <el-table-column
                        width="80"
                        prop="deptName"
                        label="部门">
                </el-table-column>
                <el-table-column
                        width="120"
                        label="角色">
                    <template v-slot="scope">
                        <span v-text="scope.row.roleNames.join('/')"></span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="状态">
                    <template v-slot="scope">
                        <el-switch
                                v-model="scope.row.state"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                :active-value="1"
                                :inactive-value="0"
                                @change="changeStatus(scope.row)">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="createTime"
                        width="180"
                        label="创建时间">
                </el-table-column>
                <el-table-column label="操作" fixed="right" width="250">
                    <template v-slot="scope">
                        <el-button
                                size="mini"
                                @click="handleEdit(scope.$index, scope.row)">编辑
                        </el-button>
                        <el-button
                                size="mini"
                                type="warning"
                                @click="resetPassword(scope.$index, scope.row)">重置密码
                        </el-button>
                        <el-popconfirm
                                title="确认删除当前行数据吗"
                                @confirm="handleDelete(scope.$index, scope.row)">
                            <el-button type="danger" size="mini" slot="reference">删除</el-button>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>

        </div>
        <!--分页区域-->
        <div class="page-nav">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="page"
                    :page-sizes="pageSizes"
                    :page-size="limit"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
        <!--弹出层区域-->
        <div>
            <el-dialog :visible.sync="dialogFormVisible" :title="title" @close="clear" width="35%">
                <el-form :model="form" ref="formRef" :rules="rules">
                    <el-form-item label="账号" :label-width="formLabelWidth" prop="username">
                        <el-input v-model="form.username" autocomplete="off" :readonly="title=='编辑'"></el-input>
                    </el-form-item>
                    <el-form-item label="昵称" :label-width="formLabelWidth" prop="nickName">
                        <el-input v-model="form.nickName" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="性别" :label-width="formLabelWidth" prop="sex">
                        <el-select v-model="form.sex" placeholder="请选择性别" style="width: 100%">
                            <el-option label="男" :value="1"></el-option>
                            <el-option label="女" :value="0"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="城市" :label-width="formLabelWidth" prop="city">
                        <el-input v-model="form.city" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="部门" :label-width="formLabelWidth" prop="deptId">
                        <el-select v-model="form.deptId" placeholder="请选择部门" style="width: 100%">
                            <el-option v-for="(dept,index) in deptList" :label="dept.deptName" :value="dept.id"
                                       :key="index"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="联系方式" :label-width="formLabelWidth" prop="tel">
                        <el-input v-model="form.tel" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="角色" :label-width="formLabelWidth" prop="roleId">
                        <el-select v-model="form.roleId" placeholder="请选择角色" :multiple="true" style="width: 100%">
                            <el-option v-for="(role,index) in roleList" :label="role.roleCh" :value="role.roleId"
                                       :key="index"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible=false">取 消</el-button>
                    <el-button type="primary" @click="addOrEditUser">确 定</el-button>
                </div>
            </el-dialog>

        </div>
    </div>
</template>

<script>
import {addUser, batchDelete, changeState, editUser, getById, resetPassword, userList} from "@/api/user";
import {deptList} from "@/api/dept";
import {roleList} from "@/api/role";

export default {
    name: "UserView",
    data() {
        return {
            formLabelWidth: '70px',
            form: {
                id: '',
                username: '',
                nickName: '',
                sex: '',
                tel: '',
                city: '',
                deptId: '',
                roleId: ''
            },
            dialogFormVisible: false, // 控制对话框显示的数据
            rules: {
                username: [{required: true, message: '请输入用户名', trigger: 'blur'}],
                nickName: [{required: true, message: '请输入昵称', trigger: 'blur'}],
                sex: [{required: true, message: '请选择性别', trigger: 'blur'}],
                roleId: [{required: true, message: '请选择角色', trigger: 'blur'}],
                deptId: [{required: true, message: '请选择部门', trigger: 'blur'}],
                tel: [{min: 11, message: '请输入正确的手机号', trigger: 'blur'}]
            },
            title: '', // 对话框标题
            pageSizes: [5, 10, 15, 20],
            limit: 5,
            page: 1,
            total: 30,
            deptList: [],
            roleList: [],
            searchForm: {
                searchParams: {
                    username: '',
                    state: '',
                    deptId: ''
                },
                limit: 5,
                page: 1
            },
            tableData: [],
            multipleSelection: []
        }
    },
    methods: {
        // 获取用户信息列表
        getUserList() {
            userList(this.searchForm).then(resp => {
                if (resp.code == 0) {
                    let {total, tableData} = resp.data
                    this.total = total
                    this.tableData = tableData
                } else {
                    this.$message.error(resp.message)
                }
            })
        },

        // 重置搜索表单
        resetForm() {
            this.searchForm = {
                searchParams: {
                    username: '',
                    state: ''
                },
                limit: 5,
                page: 1
            };
        },
        // 提交搜索请求
        onSubmit() {
            this.searchForm.limit = 5
            this.searchForm.page = 1
            this.getUserList();
        },
        // 批量删除
        batchDelete() {
            if (this.multipleSelection.length==0){
                this.$message.warning("请至少选择一条数据");
                return;
            }
            batchDelete(this.multipleSelection).then(res=>{
                if (res.code == 0) {
                    this.$message.success(res.message)
                    this.getUserList()
                } else {
                    this.$message.warning(res.message)
                }
            })
        },
        // 复选框
        handleSelectionChange(val) {
            this.multipleSelection = val.map(v => v.id)
        },
        // 编辑
        handleEdit(index, row) {
            console.log(index, row);
            let uid = row.id;
            // 根据用户id 获取用户最新数据
            getById(uid).then(res=>{
                console.log(JSON.stringify(res))

                if (res.code==0){
                    // 发送异步请求回显当前行数据
                    this.form=res.data.userInfo
                }
            })
            this.title = '编辑'
            this.dialogFormVisible = true

            // this.form = {
            //     username: 'admin',
            //     nickName: '管理员',
            //     sex: 0,
            //     tel: '15755361120',
            //     city: '安徽合肥',
            //     deptId: 1,
            //     roleId: [1, 2]
            // }
        },
        // 删除
        handleDelete(index, row) {
            let uids = [row.id]
            batchDelete(uids).then(res=>{
                if (res.code == 0) {
                    this.$message.success(res.message)
                    this.getUserList()
                } else {
                    this.$message.warning(res.message)
                }
            })
        },
        // 改变下拉选
        handleSizeChange(val) {
            this.searchForm.limit = val
            this.getUserList()
        },
        // 改变页码
        handleCurrentChange(val) {
            this.searchForm.page = val
            this.getUserList()
        },
        //显示添加弹出层
        showAddDialog() {
            this.title = '新增'
            this.dialogFormVisible = true
        },
        // 修改用户状态
        changeStatus(row) {
            let {id,state} = row
            changeState(id,state).then(res=>{
                if (res.code==0){
                    this.$message.success(res.message)
                }else {
                    this.$message.warning(res.message)
                }
                this.getUserList();
            })
        },
        // 添加或编辑用户信息
        addOrEditUser() {

            if (this.title == '新增') {
                this.$refs.formRef.validate(val=>{
                    if (val){
                        // 发送异步请求 添加用户信息
                        addUser(this.form).then(resp => {
                            if (resp.code == 0) {
                                this.$message.success(resp.message)
                                this.title = ''
                                this.dialogFormVisible = false
                                this.getUserList()
                            } else {
                                this.$message.warning(resp.message)
                            }
                        })
                    }else {
                        this.$message.warning("请填写表单必要信息")
                    }
                })

            } else {
                // 发送异步请求 编辑用户信息
                this.$refs.formRef.validate(val=>{
                    if (val){
                        editUser(this.form).then(res=>{
                            if (res.code==0){
                                this.$message.success(res.message)
                                this.title = ''
                                this.dialogFormVisible = false
                                this.getUserList()
                            }else {
                                this.$message.warning(res.message)
                            }
                        })
                    }else{
                        this.$message.warning("请填写表单必要信息")
                    }
                })
            }


        },
        // 弹窗关闭 清空数据
        clear() {
            this.title = ''
            this.dialogFormVisible = false
            this.form = {
                id: '',
                username: '',
                nickName: '',
                sex: '',
                tel: '',
                city: '',
                deptId: '',
                roleId: ''
            }
            this.$refs.formRef.clearValidate()   // 清空校验信息
        },

        // 重置密码
        resetPassword(index,row) {
            let uid = row.id
            // 重置用户密码
            resetPassword(uid).then(res=>{
                if (res.code==0){
                    this.$message.success(res.message);
                    return;
                }
                this.$message.warning(res.message);
            })
        }
    },
    created() {
        this.getUserList();
        // 获取部门列表
        deptList().then(resp => {
            this.deptList = resp.data.deptList
        })
        // 获取角色列表
        roleList().then(resp => {
            this.roleList = resp.data.roleList
        })
    }

}
</script>

<style scoped>

.box {
    padding: 15px;
}

.search {
    border-bottom: 1px solid #DCDFE6;
}

.batch {
    margin-top: 15px;
    margin-bottom: 25px;
}

.page-nav {
    margin-top: 15px;
    margin-bottom: 30px;
}

.el-button {
    margin-right: 5px;
}
</style>